<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
      #chart-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>

    <script src="./china.js"></script>
  </head>
  <body>
    <div id="chart-panel" style="margin-top: 30px"></div>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart-panel"));
      var option = {
        tooltip: {
          trigger: "item",
          show: true,
          enterable: true,
          triggerOn: "none",
          className: "map-echarts-tooltip",
          // position(point, params, dom, rect, size) {
          //   return [point[0] - size.contentSize[0] / 2, point[1] + 10];
          // },
        },
        // tooltip: {
        //   trigger: "item",
        //   borderWidth: 0, // 取消边框
        //   borderColor: "transparent", // 设置边框颜色为透明
        //   background: "red",
        //   className: "tooltipClass",
        //   // // 使用 formatter 自定义 tooltip 内容
        //   formatter: function (params) {
        //     // console.log("params", params);
        //     const tooltipHtml = `<div style="background: yellow; color: #fff">123</div>`;
        //     return tooltipHtml;
        //   },
        // },
        series: [
          {
            type: "map",
            mapType: "china",
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: [
              {
                name: "北京",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              {
                name: "天津",
                value: Math.round(Math.random() * 1000),
                tipData: [
                  Math.round(Math.random() * 1000),
                  Math.round(Math.random() * 1000),
                ],
              },
              // 添加更多地区...
            ],
          },
        ],
      };
      myChart.setOption(option);

      console.log("option", option);

      // 使用定时器实现轮播高亮
      var mapData = option.series[0].data;
      var highlightedIndex = 0; // 初始高亮地区的索引
      var count = 0;
      var timeTicket = null;
      var dataLength = option.series[0].data.length;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function () {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 1000);

      //   // 设置新的高亮状态
      //   mapData[highlightedIndex].selected = true;
      //   // 重新渲染图表
      //   myChart.clear(); // 清空echarts数据
      //   myChart.setOption(option);

      //   setInterval(function() {
      //     // 取消之前的高亮状态
      //     mapData.forEach(function(item) {
      //       item.selected = false;
      //     });
      //     // 设置新的高亮状态
      //     mapData[highlightedIndex].selected = true;
      //     // 重新渲染图表
      //     myChart.clear() // 清空echarts数据
      //     myChart.setOption(option);
      //     // 更新高亮索引，确保在数组范围内循环
      //     highlightedIndex = (highlightedIndex + 1) % mapData.length;
      //   }, 2000); // 每隔2秒切换一次高亮地区
    </script>
    <style>
      .map-echarts-tooltip {
        background: red !important;
      }
    </style>
  </body>
</html>
